<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>study</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="sidebar"></div>
  <!-- header盒子制作开始啦  -->
  <div class="header">
    <div class="wrapper">
      <!-- logo -->
      <div class="logo">
        <!-- logo要用h1>a>官网名的形式，因为搜索引擎就是这样搜的 -->
        <h1><a href="#">学成在线</a></h1>
      </div>
      <!-- nav -->
      <div class="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">课程</a></li>
          <li><a href="#">职业规范</a></li>
        </ul>
      </div>
      <!-- search -->
      <div class="search">
        <input type="search" placeholder="请输入搜索内容" name="" value="">
      </div>
      <!-- user -->
      <div class="user">
        <img src="uploads/user.png" alt="">
        <span>初来乍到</span>
      </div>
    </div>

  </div>
  <!-- header盒子制作结束啦  -->

  <!-- banner start -->
  <div class="banner">
    <div class="wrapper">
      <div class="left">
        <ul>
          <li><a href="#">前端学习1<i>></i></a></li>
          <li><a href="#">前端学习2<i>></i></a></li>
          <li><a href="#">前端学习3<i>></i></a></li>
          <li><a href="#">前端学习4<i>></i></a></li>
          <li><a href="#">前端学习5<i>></i></a></li>
          <li><a href="#">前端学习6<i>></i></a></li>
          <li><a href="#">前端学习7<i>></i></a></li>
          <li><a href="#">前端学习8<i>></i></a></li>
          <li><a href="#">前端学习9<i>></i></a></li>
        </ul>
      </div>
      <div class="right">
        <h2>我的课程</h2>
        <div class="myclasses">
          <a class="myclass" href="#">
            <dl>
              <dt>课程1</dt>
              <dd><span>正在学习</span>-章节1</dd>
            </dl>
          </a>
          <a class="myclass" href="#">
            <dl>
              <dt>课程2</dt>
              <dd><span>正在学习</span>-章节2</dd>
            </dl>
          </a>
          <a class="myclass" href="#">
            <dl>
              <dt>课程3</dt>
              <dd><span>正在学习</span>-章节3</dd>
            </dl>
          </a>
          <a class="to-all-classes" href="#">全部课程</a>
        </div>
      </div>
    </div>

  </div>
  <!-- banner end -->
  <!-- 精品推荐开始 -->
  <div class="recommend wrapper">
    <h3>精品推荐推荐</h3>
    <ul>
      <li><a href="">精品课程1</a></li>
      <li><a href="">精品课程2</a></li>
      <li><a href="">精品课程3</a></li>
      <li><a href="">精品课程4</a></li>
      <li><a href="">精品课程5</a></li>
      <li><a href="">精品课程6</a></li>
      <li><a href="">精品课程7</a></li>
      <li><a href="">精品课程8</a></li>
    </ul>
    <a class="mod" href="">修改兴趣</a>
  </div>
  <!-- 精品推荐结束 -->
  <!-- 课程版块开始 -->
  <div class="class-sec wrapper">
    <div class="hd">
      <h3>精品推荐</h3>
      <a class="all" href="">全部课程<i>></i></a>
    </div>
    <div class="bd">
      <ul>
        <li>
          <a href="#">
            <img src="uploads/course01.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course02.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course03.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course04.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course05.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course06.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course07.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course08.png" alt="">
            <h4>课程1盯上我了解你说了吗啡色号主</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course09.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course10.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 课程版块结束 -->
  <!-- 前端开发工程师开始 -->
  <div class="domain-class wrapper">
    <div class="hd">
      <h3>前端开发工程师</h3>
      <ul>
        <li><a href="">热门</a></li>
        <li><a href="">初级</a></li>
        <li><a href="">中级</a></li>
        <li><a href="">高级</a></li>
      </ul>
      <a class="all" href="">全部课程<i>></i></a>
    </div>
    <div class="bd">
      <div class="left">
        <img src="uploads/web_left.png" alt="">
      </div>
      <div class="right">
        <div class="top">
          <img src="uploads/web_top.png" alt="">
        </div>
        <div class="bottom">

          <ul>
            <li>
              <a href="#">
                <img src="uploads/course01.png" alt="">
                <h4>课程1</h4>
                <p>
                  <span>高级</span>-1520人正在学
                </p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="uploads/course02.png" alt="">
                <h4>课程1</h4>
                <p>
                  <span>高级</span>-1520人正在学
                </p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="uploads/course03.png" alt="">
                <h4>课程1</h4>
                <p>
                  <span>高级</span>-1520人正在学
                </p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="uploads/course08.png" alt="">
                <h4>课程1盯上我了解你说了吗啡色号主</h4>
                <p>
                  <span>高级</span>-1520人正在学
                </p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 前端开发工程师结束 -->
  <!-- 课程版块开始 -->
  <div class="class-sec wrapper">
    <div class="hd">
      <h3>精品推荐</h3>
      <a class="all" href="">全部课程<i>></i></a>
    </div>
    <div class="bd">
      <ul>
        <li>
          <a href="#">
            <img src="uploads/course06.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course07.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course08.png" alt="">
            <h4>课程1盯上我了解你说了吗啡色号主</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course09.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="uploads/course10.png" alt="">
            <h4>课程1</h4>
            <p>
              <span>高级</span>-1520人正在学
            </p>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 课程版块结束 -->
  <!-- footer开始 -->
  <div class="footer">
    <div class="wrapper">ddss</div>
  </div>
  end
  <!-- footer结束 -->
</body>

</html>
